<template>
  <div class="edu-page-warp">
    <condition-card @reset="reset" @search="onSubmit" label-width="150px">
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('label.schoolTerm')">
            <CalendarSelect v-model="queryForm.calendarId" @load-done="done"></CalendarSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('label.college')">
            <el-select
              v-model="queryForm.faculty"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.college"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('teachers.nationality')">
            <el-select
              v-model="queryForm.country"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.country"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item :label="$t('teachers.underTeachQual')" v-if="this.global.projectId == '1'">
            <el-select
              v-model="queryForm.qualification"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.qualification"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('teachers.postTeachQual')" v-if="this.global.projectId == '2'">
            <el-select
              v-model="queryForm.qualification"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.qualification"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('teachers.postTeachQualOnjob')" v-if="this.global.projectId == '4'">
            <el-select
              v-model="queryForm.qualification"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.qualification"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('auditLog.operationType')">
            <el-select
              v-model="queryForm.operateType"
              style="width: 100%;"
              clearable
              filterable
              :placeholder="$t('common.text.all')"
            >
              <el-option
                v-for="item in options.operateType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('label.operator')">
            <el-input
              v-model="queryForm.operateUser"
              style="width: 100%;"
              :placeholder="$t('courseArrange.preArrangeLog.plsInpuCodeOrName')"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <el-card shadow="never">
      <div class="edu-page-title">{{$t('teachers.teachQualRecord')}}</div>
      <el-row style="margin-bottom:16px">
        <el-col :span="4">
          <el-input
            v-model="queryForm.keyword"
            :placeholder="$t('teachers.inputNameOrNoSearch')"
            @keyup.enter.native="onSubmit"
            style="width:200px"
          >
            <i
              class="el-icon-search"
              slot="suffix"
              style="margin-top:10px;cursor:pointer"
              @click="onSubmit"
            ></i>
          </el-input>
        </el-col>
        <el-col :span="20">
          <div class="float-right">
            <el-button type="primary" @click="handleExport">{{$t('message.export')}}</el-button>
          </div>
        </el-col>
      </el-row>
      <edu-table
        url="api/baseresservice/teacher/operateList"
        ref="mainTable"
        size="mini"
        :order="false"
        style="width:100%"
        @selection-change="selectionChange"
      >
        <el-table-column :label="$t('majorPermission.no')" width="60" prop="teacher.code"></el-table-column>
        <el-table-column :label="$t('label.stuName')" width="80" prop="teacher.name"></el-table-column>
        <el-table-column :label="$t('label.sex')" width="60" prop="teacher.sexI18n"></el-table-column>
        <el-table-column :label="$t('label.college')" width="140" prop="teacher.facultyI18n"></el-table-column>
        <el-table-column :label="$t('teachers.nationality')" width="80" prop="teacher.countryI18n"></el-table-column>
        <el-table-column :label="$t('teachers.age')" width="60" prop="teacher.age"></el-table-column>
        <el-table-column :label="$t('teachers.underTeachQual')" width="150" v-if="this.global.projectId === '1'">
          <template slot-scope="scope">{{transQual(scope.row.qualification)}}</template>
        </el-table-column>
        <el-table-column :label="$t('teachers.postTeachQual')" width="150" v-if="this.global.projectId === '2'">
          <template slot-scope="scope">{{transQual(scope.row.qualification)}}</template>
        </el-table-column>
        <el-table-column :label="$t('teachers.postTeachQualOnjob')" width="150" v-if="this.global.projectId === '4'">
          <template slot-scope="scope">{{transQual(scope.row.qualification)}}</template>
        </el-table-column>
        <el-table-column :label="$t('auditLog.operationType')" width="120">
          <template slot-scope="scope">{{transStatus(scope.row.operateType)}}</template>
        </el-table-column>
        <el-table-column
          :label="$t('label.operateTime')"
          width="160"
          prop="operateTime"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column :label="$t('label.operator')" width="100" prop="operateUser"></el-table-column>
        <el-table-column :label="$t('label.operatorIP')" width="120" prop="operateIp"></el-table-column>
      </edu-table>
    </el-card>
  </div>
</template>
 <script>
import { queryDic } from "common/src/api/dictionary";
import UTILS from "common/src/utils/utils";
import { exportOperate } from "common/src/api/resource/teachers";
import mixin from 'common/src/mixins/index';
export default {
  name: "teacherQualificationStatistics",
  mixins: [mixin],
  data() {
    return {
      queryForm: {
        calendarId: null, //学期
        faculty: null, //学院
        country: null, //国籍
        qualification: null, //授课资格
        operateType: null, //操作类型
        operateUser: null, //操作人
        keyword: null //姓名/工号/证件号
      },
      options: {
        college: null,
        country: null,
        qualification: null,
        operateType: null
      },
      defaultCalendarId: null,
      selectTeachers: null //选中项
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    reset() {
      Object.keys(this.queryForm).forEach(key => {
        this.queryForm[key] = null;
      });
      this.queryForm.calendarId = this.defaultCalendarId;
      this.onSubmit();
    },
    onSubmit() {
      let param = _.cloneDeep(this.queryForm);
      this.$refs.mainTable.search(param);
    },
    done() {
      this.defaultCalendarId = this.queryForm.calendarId;
      this.onSubmit();
    },
    init() {
      //获取字典信息
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["G_GJQU", "X_YX"]
      };
      queryDic(data).then(res => {
        if (res.code == 200 && res.data) {
          UTILS.fillSelect(
            {
              college: "X_YX",
              country: "G_GJQU"
            },
            res.data,
            this.options
          );
        }
      });
      this.options.qualification = [
        {
          label: this.$t("message.yes"),
          value: 1
        },
        {
          label: this.$t("message.no"),
          value: 0
        }
      ];
      //操作类型
      this.options.operateType = [
        {
          label: "设置授课资格",
          value: 1
        },
        {
          label: "申请授课资格",
          value: 2
        },
        {
          label: "代申请授课资格",
          value: 3
        },
        {
          label: "取消授课资格",
          value: 4
        }
      ];
    },
    handleExport() {
      //导出
      let params = _.cloneDeep(this.queryForm);
      if (this.selectTeachers != null && this.selectTeachers.length > 0) {
        params.dataList = this.selectTeachers;
      }
      exportOperate(params);
    },
    //根据value获取指定状态
    transStatus(value) {
      let option = this.options.operateType.find(t => t.value === value);
      return option ? option.label : null;
    },
    transQual(value) {
      let option = this.options.qualification.find(t => t.value === value);
      return option ? option.label : null;
    },
    selectionChange(val) {
      this.selectTeachers = val;
    }
  }
};
</script>
